<template>
  <div class="login-main">
    <div class="login-box">
      <div class="login-content">
        <img src="./logo_index.png" alt />
        <!--组件中的 属性绑定 和 v-model 必须要有对应的data成员支持配合-->
        <!--:model="loginForm"   此属性为data数据 分配到表单中的双向绑定数据初始值对象-->
        <!--:rules="loginFormRules"   此属性为验证表单数据的数据-->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <!--验证表单的时候需要添加属性prop="data数据名"-->
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">\
              <!--icon 图标 放到input中-->
              <i slot="prefix" class="iconfont icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="loginForm.code" placeholder="请输入验证码">
              <!--引入icon 图标-->
              <i slot="prefix" class="iconfont icon-yanzhengma"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="xieyi">
            <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
            <span>我已阅读并同意用户协议和隐私条款</span>
          </el-form-item>
          <el-form-item>
            <!--type类型是组件中的样式类型-->
            <!--v-loading组件固定属性 在data中定义一个数据btnLoading 值为true或者false-->
            <el-button type="primary" v-loading="btnLoading" style="width:100%;" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 引入极验js验证js文件
import '@/assets/js/gt.js'
// 引入字体图标的css文件
import '@/assets/font/iconfont.css'
export default {
  methods: {
    // 注册点击登录事件
    login () {
      // 判断之前有生成过窗口，就直接打开
      if (this.catpchaObject) {
        return this.catpchaObject.verify()
      }

      this.btnLoading = true // 按钮等待效果
      // this:VueComponent对象，本身有继承Vue对象
      // this可以访问本身组件的成员(data/methods)
      // 对当前el-form表单进行校验
      // 验证表单的数据方法validate(参数valid)=>{if(valid)判断表单是否全部通过验证}
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then(result => {
              // console.log(result)
              // 从result中把相关的信息解构出来
              let { data } = result.data
              // 显示人机窗口
              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest(
                {
                  // 以下配置参数来自服务端 SDK
                  gt: data.gt,
                  challenge: data.challenge,
                  offline: !data.success,
                  new_captcha: true,
                  product: 'bind' // 隐藏"人机按钮"
                },
                captchaObj => {
                  // 这里可以调用验证实例 captchaObj 的实例方法
                  captchaObj
                    .onReady(() => {
                      // 验证码ready之后才能调用verify方法“显示验证码”
                      captchaObj.verify() // 显示验证码
                    })
                    .onSuccess(() => {
                      // 人机验证成功
                      // 验证账号登录系统
                      this.loginPro()
                    })
                    .onError(() => {
                      // 人机验证失败
                    })
                }
              )
            })
            .catch(err => {
              console.log(err)
              return this.$message.error('获得人机验证码失败！')
            })
        }
      })
    },
    loginPro () {
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then(result => {
          var { token, photo } = result.data.data
          window.sessionStorage.setItem('name', '周润发')
          window.sessionStorage.setItem('token', token)
          window.sessionStorage.setItem('photo', photo)
          // 成功后跳转到后台首页
          this.$router.push({ name: 'home' })
        })
        .catch(result => {
          return this.$message.error('账号密码有误')
        })
    }
  },
  // 数据
  data () {
    // 验证表单的方法 写在data中 单选框值为true false 只能用自定义验证表单的方法
    var checkXieyi = function (rule, value, callback) {
      // value为表单的数据结果  callback回调函数 处理结果
      if (Number(value) === 0) {
        // boolen数据转为number 0 为false 1为true
        // 验证失败后的提示信息 return callback(new  Error('提示信息'))
        return callback(new Error('请遵守协议'))
      }
      // 如果成功直接执行下一步
      callback()
    }
    // 验证手机号码的自定义验证方法
    var checkMobile = function (rule, value, callback) {
      // 正则表达式的方式
      var reg = /^1[356879]\d{9}$/
      // 验证正则表达式
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的手机号'))
      }
      callback()
    }
    // 验证验证码
    var checkCode = function (rule, value, callback) {
      var reg = /^[0-9]{6}$/
      if (!reg.test(value)) {
        return callback(new Error('请输入6位数验证码'))
      }
      callback()
    }
    // data函数返回的数据
    return {
      // 绑定分配给表单的双向绑定数据初始值
      catpchaObject: null,
      btnLoading: false,
      loginForm: {
        mobile: '18610978653',
        code: '246810',
        xieyi: true
      },
      // 验证表单的规则
      loginFormRules: {
        mobile: [
          // 表单项 required=>true为必填项
          // message=>'错误是的提示信息'
          // trigger=>'触发验证的方法  blur失去焦点的时候 change 输入框发生变化时'
          { required: true, message: '请输入手机号', trigger: 'blur' },
          // 自定义验证表单的引入 validator:值为方法名 触发验证blur
          { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        xieyi: [{ validator: checkXieyi }]
      }
    }
  }
}
</script>

<style lang="less">
// 当前页面css样式
.login-main {
  width: 100%;
  height: 100%;
  background: url("./wukong.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 410px;
    height: 350px;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    .login-content {
      text-align: center;
      width: 80%;
    }
    img {
      margin: 20px 0;
    }
  }
}
</style>
